<template>
  <view>
    <nav-bar title="技师证书"></nav-bar>
    <scroll-view scroll-y :style="{ height: mainHeight }">
      <view class="detail">
        <view class="title">技师证书</view>
        <view class="date">请上传jpg、jpge、pdf格式</view>
        <view class="box">
          <view class="title">
            证书1
          </view>
          <!-- <view style="margin-left: 45rpx;">
            <uni-file-picker v-model="imageValue" :limit="1" file-mediatype="image" :imageStyles="imageStyles"
              :sizeType='sizeType' @select="select($event)">
              <uni-icons type="camera-filled" size="30" color="#ccc"></uni-icons>
            </uni-file-picker>
          </view> -->
          <view class="photo">
            <view class="image" v-if="!imgUrl" @click="openChooseImg">
              <u-icon name="plus" color="#666666" size="22"></u-icon>
            </view>
            <img :src="imgUrl" alt="" class="head-img" @click="openChooseImg" v-else>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="button">上传</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue'
import { getToken } from "@/utils/auth"
import pageConfig from '@/config'
export default {
  name: 'uploadPhoto',
  components: { NavBar },
  data() {
    return {
      baseUrl: pageConfig.baseUrl,
      mainHeight: '',
      image: '',
      imageValue: [],
      sizeType: ['compressed'],
      imageStyles: {
        width: 100,
        height: 100
      },
    }
  },
  created() {
    this.mainHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
  },
  methods: {
    select($event, key) {
      const tempFilePaths = $event.tempFilePaths
      // this.imageValue = tempFilePaths
      tempFilePaths.forEach((item) => {
        uni.uploadFile({
          url: this.baseUrl + '/prod-api' + '/common/upload',
          // H5上传
          // file: tempFilePaths,
          // 微信小程序上传
          filePath: item,
          name: 'file',
          header: {
            "Authorization": 'Bearer ' + getToken()
          },
          // 成功函数
          success: (res) => {
            // 取到文档服务器的值
            this.$refs.uToast.show({
              message: '上传成功',
              type: 'success',
            })
            let uploadData = JSON.parse(res.data)
            let file = {}
            // 下面3个值是uni-app规定的一个不能少
            file.url = this.baseUrl + '/prod-api' + uploadData.fileName
            file.extname = ''
            file.name = uploadData.filename
            // this.imageForm[key] = this.imageForm[key] || []
            // this.imageForm[key].push({ url: this.baseUrl + uploadData.fileName, fileId: this.imageForm[key].length })
            // const needForm = [
            //   { name: 'imageForm', key: 'url', splitIcon: ',' },
            //   { name: 'pickerForm', key: 'value', splitIcon: '-' }
            // ]
            // this.getCustomData(needForm)
          },
          // 失败提示用户重新上传
          // fail: error => {
          //   this.$refs.uToast.show({
          //     message: '上传失败',
          //     type: 'warn',
          //   })
          // }
        })
      })
    },
    success() {
      this.$refs.uToast.show({
        message: '提交成功',
        type: 'success',
      })
    },
    fail() {
      this.$refs.uToast.show({
        message: '修改失败',
        type: 'error',
      })
    },
    openChooseImg() {
      uni.chooseImage({
        count: 1, //最多可选择的张数
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择，和摄像头功能，默认二者都有
        success: res => {
          this.imgUrl = res.tempFilePaths[0]   //把选择的头像赋值给imgurl
        }
      });
    },

  }

}
</script>

<style lang="scss" scoped>
.title {
  font-size: 40rpx;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}

.detail {
  margin: 30rpx;
  background: #FFFFFF;
  border-radius: 15rpx 15rpx 15rpx 15rpx;
  opacity: 1;
  padding: 29rpx 26rpx 300rpx;

  .date {
    font-size: 35rpx;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    color: #666666;
    margin-bottom: 10rpx;
  }

  .box {
    margin: 35rpx 0 25rpx;
    display: flex;

    .photo {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 45rpx;

      .image {
        width: 145rpx;
        height: 145rpx;
        background: #F4F4F4;
        // border-radius: 50%;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .head-img {
        width: 145rpx;
        height: 145rpx;
        // border-radius: 50%;
        opacity: 1;
      }

    }
  }

}

.bottom {
  padding: 0 30rpx;

  .button {
    width: 100%;
    height: 80rpx;
    opacity: 1;
    border-radius: 46rpx;
    background: rgba(194, 126, 21, 1);
    text-align: center;
    line-height: 80rpx;
    margin-top: 30rpx;
    font-size: 40rpx;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);

  }
}</style>